<!DOCTYPE html>
<html>
	<head>
		<title>Family-chat</title>
		<meta name="format-detection" content="telephone=no">
		<meta name="format-detection" content="address=no">
		<meta name="format-detection" content="email=no">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel='stylesheet' href='/stylesheets/style.css' />
		<script src="javascripts/socket.io.js"></script>
		<script src="javascripts/jquery-1.8.3.min.js"></script>
	</head>
	<style>
		::-webkit-scrollbar{
			display: none;
		}
	</style>
	<body>
		<div class="message"></div>
		<div class="content">
			<div class="top">Family-chat
				<div class="onLine">在线人数：12</div>
			</div>
			<div class="login">

				<input type="text" class="user" placeholder="输入用户名">
				<input type="password" class="psw" placeholder="输入密码">	
				<button class="btn-login">登陆</button>
				<button class="btn-regist">注册</button>
				<p class="router">还没有账号,去注册>>></p>
			</div>
			<ul class="msg_list" style="overflow: auto;">
				
			</ul>
			<div class="send">
					<input type="text" class="sendCont">
				<button class="btn-send">发送</button>
			</div>
		</div>
	</body>
	<script>
			function active(){
				this.touch=true;
				this.io=io;
				this.name="";
			};
			active.prototype={
				init:function(){
					this.resizeEvt();//自适应屏幕
					this.prevent();//阻止双击时屏幕滑动\和优化触摸事件
					this.methods();//页面操作
				},
				resizeEvt:function(){
					(function(doc, win) {
						var docEl = doc.documentElement,
							resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
							recalc = function() {
								var clientWidth = docEl.clientWidth;
								if(!clientWidth) return;
								docEl.style.fontSize = 16 * (clientWidth / 375) + 'px';
							};

						if(!doc.addEventListener) return;
						win.addEventListener(resizeEvt, recalc, false);
						doc.addEventListener('DOMContentLoaded', recalc, false);
					})(document, window);
				},
				prevent:function(){
 					var that=this;
 					$(document).on("touchmove",function(){
 						this.touch=false;
 					});
 					$(document).on("touchend",function(){
 						this.touch=true;
 					})
 					/*阻止浏览器默认行为函数*/
 					var preHandler = function(e){e.preventDefault();}
 					/*阻止滑动之后的touch事件*/
					$(document).on("touchmove",function(e){
						that.flag=false;
					});
					$(document).on("touchend",function(e){
						that.flag=true;
					});
 					/*阻止用户双击使屏幕上滑*/
 					var agent = navigator.userAgent.toLowerCase();        //检测是否是ios
 					var iLastTouch = null;                                //缓存上一次tap的时间
 					if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0){
 					    document.body.addEventListener('touchend', function(event){
 					        var iNow = new Date()
 					            .getTime();
 					        iLastTouch = iLastTouch || iNow + 1 /** 第一次时将iLastTouch设为当前时间+1 */ ;
 					        var delta = iNow - iLastTouch;
 					        if (delta < 500 && delta > 0){
 					            event.preventDefault();
 					            return false;
 					        }
 					        iLastTouch = iNow;
 					    }, false);
 					};
 				},
 				methods:function(){
 					var that=this;
 					$(".router").on("touchend",function(){
 						if(that.touch){
 							$(".btn-regist").show();
	 						$(".btn-login").hide();
	 						$(".router").hide();
 						}
 					})
 					//与服务器建立连接；
 					var io=that.io("http://localhost:3000");
 					// 登录并向服务器传输数据
 					io.on("connect",function(){
 						
 						$(".btn-regist").on("touchend",function(){
	 						if (that.touch) {
	 							io.emit("userName",$(".user").val(),$(".psw").val());
	 							$(".user").val("");$(".psw").val("");
	 							io.on("reType",function(reType){
	 								if (reType) {
	 									$(".message").html("注册成功请登陆...").css({marginLeft:-$(".message").width()*0.5}).fadeIn();
	 									setTimeout(function(){
	 										$(".message").hide();
	 									},2000);
	 									$(".btn-regist").hide();
	 									$(".btn-login").show();
	 								}else{
	 									$(".message").html("用户名已被注册...").css({marginLeft:-$(".message").width()*0.5}).fadeIn();
	 									setTimeout(function(){
	 										$(".message").hide();
	 									},2000);
	 								}
	 							})
	 						}
	 					});
 						$(".btn-login").on("touchend",function(){
	 						if (that.touch) {
	 							that.name=$(".user").val();
	 							io.emit("loginName",that.name,$(".psw").val());
	 							$(".user").val("");$(".psw").val("");
	 							io.on("loType",function(loType){
	 								// console.log(loType);
	 								if (!loType) {
	 									$(".message").html("用户名不存在...").css({marginLeft:-$(".message").width()*0.5}).fadeIn();
	 									setTimeout(function(){
	 										$(".message").hide();
	 									},2000);
	 								}else{
	 									if(loType==10){
		 									$(".message").html("密码错误...").css({marginLeft:-$(".message").width()*0.5}).fadeIn();
		 									setTimeout(function(){
		 										$(".message").hide();
		 									},2000);
	 									}else if(loType==11){
	 										$(".login").slideUp();
	 										$('.onLine').show();
	 									}
	 								}
	 							})
	 						}
	 					});
	 					$(".btn-send").on("touchend",function(){
	 						if (that.touch) {
	 							var val=$(".sendCont").val();
	 							if (val) {
	 								io.emit("sendMessage",[that.name,val]);

	 							}else{
	 								$(".message").html("不能发送空信息").css({marginLeft:-$(".message").width()*0.5}).fadeIn();
 									setTimeout(function(){
 										$(".message").hide();
 									},2000);
	 							}
	 							$(".sendCont").val("");
	 						}
	 					});
	 					io.on("message",function(arr){
							// console.log(arr);
							if (arr[0]==that.name) {
								$('<li class="list"><p class="userName">'+arr[0]+':</p><p class="msg">'+arr[1]+'</p></li>').appendTo('.msg_list');
							}else{
								$('<li><p>'+arr[0]+':</p><p class="msg">'+arr[1]+'</p></li>').css("float","left").appendTo('.msg_list');
							}
							$('.msg_list').scrollTop($('.msg_list')[0].scrollHeight)
							

						})
						io.on("onLine",function(onLine){
							$('.onLine').html('在线人数：'+onLine.length)
						})
 					})
 					
 				}
			};
			var obj=new active();
			obj.init();
	</script>
</html>
